<template>
  <div class="products">
    <div class="prod-t">产品列表页面</div>
    <div class="prod">
      产品名称:
      <input type="text" v-model="inpu" />
      <button @click="fn">新增</button>
      <button @click="fn2">批量删除</button>
    </div>
    <div>
      <table>
        <tr>
          <th><input type="checkbox" v-model="isCheckAll" /></th>
          <th>产品名称</th>
          <th>产品编号</th>
          <th>修改时间</th>
          <th>成本价</th>
          <th>库存数</th>
          <th>总价</th>
          <th>登记人</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item, index) in arr" :key="index">
          <td><input type="checkbox" v-model="item.isShow" /></td>
          <td>{{ item.pname }}</td>
          <td>{{ item.id }}</td>
          <td>{{ item.uptDate | date }}</td>
          <td>{{ item.price }}</td>
          <td>{{ item.count }}</td>
          <td>{{ item.price * item.count }}</td>
          <td>{{ item.user }}</td>
          <td>
            <span @click="edit(item, index)">编辑</span>|<span
              @click="del(index)"
              >删除</span
            >
          </td>
        </tr>
        <tr>
          <td colspan="9">合计:{{ arr.length }}类产品,总计:{{ total }}元</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "products",
  data() {
    return {
      arr: this.$store.state.arr,
      inpu: "",
    };
  },
  computed: {
    total() {
      //!!!!! 选中才计算总价
      let sum = this.arr.reduce((pre, curr) => {
        return pre + (curr.isShow ? curr.price * curr.count : 0);
      }, 0);
      return sum;
    },
    isCheckAll: {
      get() {
        //如果books中所有对象的isCheck属性都为true时 返回true
        //如果有一个为false  返回false
        let flag = true;
        for (let i = 0; i < this.arr.length; i++) {
          if (this.arr[i].isShow == false) {
            flag = false;
          }
        }
        if (this.arr.length == "") {
          flag = false;
        }
        return flag;
      },
      set(val) {
        console.log("set", val);
        this.arr.forEach((item) => (item.isShow = val));
      },
    },
  },
  methods: {
    ...mapMutations(["dels", "adds"]),
    fn() {
      this.$router.push({ path: "/home/add" });
    },
    del(idx) {
      this.dels(idx);
    },
    edit(em, int) {
      this.adds(int);
      // this.$router.push({ path: "/home/add" });
      this.$router.push({
        path: "/home/edit/",
        query: {
          id: int,
        },
      });
    },
    fn2() {
      for (let i = 0; i < this.arr.length; i++) {
        if (this.arr[i].isShow) {
          this.arr.splice(i, 1);
          i--;
        }
      }
    },
  },
  filters: {
    date(time) {
      let oldDate = new Date(time);
      let newDate = new Date();
      var dayNum = "";
      var getTime = (newDate.getTime() - oldDate.getTime()) / 1000;

      if (getTime < 60 * 5) {
        dayNum = "刚刚";
      } else if (getTime >= 60 * 5 && getTime < 60 * 60) {
        dayNum = parseInt(getTime / 60) + "分钟前";
      } else if (getTime >= 3600 && getTime < 3600 * 24) {
        dayNum = parseInt(getTime / 3600) + "小时前";
      } else if (getTime >= 3600 * 24 && getTime < 3600 * 24 * 30) {
        dayNum = parseInt(getTime / 3600 / 24) + "天前";
      } else if (getTime >= 3600 * 24 * 30 && getTime < 3600 * 24 * 30 * 12) {
        dayNum = parseInt(getTime / 3600 / 24 / 30) + "个月前";
      } else if (time >= 3600 * 24 * 30 * 12) {
        dayNum = parseInt(getTime / 3600 / 24 / 30 / 12) + "年前";
      }

      let year = oldDate.getFullYear();
      let month = oldDate.getMonth() + 1;
      let day = oldDate.getDate();
      let hour = oldDate.getHours();
      let minute = oldDate.getMinutes();
      let second = oldDate.getSeconds();
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second
      );
    },
  },
  watch: {
    inpu(newVal,oldDate) {
      console.log(oldDate);
      for (let i = 0; i < this.arr.length; i++) {
        if (this.arr[i].pname.indexOf(newVal) == -1) {
          this.arr.splice(i, 1);
          i--;
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.prod-t {
  width: 1200px;
  height: 50px;
  border-bottom: 1px solid #000;
  font-size: 18px;
  font-weight: bold;
  line-height: 50px;
  padding-left: 50px;
}
.prod {
  width: 400px;
  height: 60px;
  margin-left: 10px;
  line-height: 60px;
  input {
    width: 180px;
    height: 26px;
    border: 1.5px solid #86cdeb;
    outline: none;
  }
  button {
    margin-left: 10px;
    height: 30px;
    background-color: #86cdeb;
    border: none;
    color: #fff;
  }
}
table {
  border: 1px solid #000;
  border-collapse: collapse;
  text-align: center;
  th,
  td {
    border: 1px solid #000;
    padding: 5px 10px;
  }
}
</style>
